
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
</head>
<body>
    
    <div class="box"></div>
    <script>
        // api接口练习地址：https://www.apifox.cn/apidoc/project-1937884/api-49760218
        /*
            1.post
            地址：https://hmajax.itheima.net/api/register
            参数：username= password=
        */


        // “Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML(json取代)） 是一门集合html、css、js的页面局部刷新综合技术。

        //     1. 创建 XMLHTTPRequest 对象
        const xhr = new XMLHttpRequest()
        console.log(xhr.readyState);
        
        // 2. 使用 open 方法设置和服务器的交互信息

        xhr.open("post","https://hmajax.itheima.net/api/register",true)//异步
        console.log(xhr.readyState);

        // 　　3. 设置发送的数据，开始和服务器端交互
        // 如果是post提交数据需要通过设置请求头 调整发送数据的编码方式

        // application/x-www-form-urlencoded :传递普通的表单数据 key1=value1&key2=value2
        // multipart/form-data:传特殊的表单数据，包含图片、视频、音频资源
        // application/json:JSON对象方式传值 {"name":"李四"}
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
        // data
        xhr.send("username=user0002&password=111111")
         // 　　4. 返回请求结果（成功和失败），注册事件
         console.log(xhr.readyState);
        xhr.onreadystatechange = function () {
            console.log(xhr.readyState);
            if (xhr.readyState==4 && xhr.status == 200) {
                console.log(xhr.response);
             
               
            }
        }

       


    </script>
</body>
</html>